<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Tracker - Reports</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/png" href="icon/icon32.png">
  <link rel="icon" sizes="16x16" href="icon/icon16.png">
  <link rel="icon" sizes="32x32" href="icon/icon32.png">
  <link rel="icon" sizes="48x48" href="icon/icon48.png">
  <link rel="icon" sizes="128x128" href="icon/icon128.png">
  <link rel="stylesheet" href="timer-float.css">
  <style>
    .chart-container {
      background-color: white;
      padding: 15px;
    }

    .reports-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 24px;
    }

    .report-card {
      padding: 16px;
      margin-bottom: 20px;
    }

    .report-card-header {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
    }

    .report-card-title {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
    }

    /* 提示样式 */
    .tooltip {
      position: relative;
      display: inline-block;
      margin-left: 5px;
      cursor: help;
    }

    .tooltip .tooltip-icon {
      background: #e0e0e0;
      color: #5f6368;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: bold;
    }

    .tooltip .tooltip-text {
      visibility: hidden;
      width: 200px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 4px;
      padding: 6px 8px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -100px;
      opacity: 0;
      transition: opacity 0.3s;
      font-size: 12px;
      font-weight: normal;
    }

    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }

    .tooltip .tooltip-text::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }

    .report-table {
      width: 100%;
      border-collapse: collapse;
    }

    .report-table th,
    .report-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #f0f0f0;
    }

    .report-table th {
      font-weight: 500;
      color: #5f6368;
    }

    .report-table th:last-child,
    .report-table td:last-child {
      width: 50%;
    }

    .progress-bar {
      height: 8px;
      background-color: #f0f0f0;
      border-radius: 4px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background-color: #1a73e8;
    }

    .progress-fill.green {
      background-color: #137333;
    }

    .progress-fill.orange {
      background-color: #b06000;
    }

    .report-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .summary-item {
      display: flex;
      flex-direction: column;
      background-color: #f9f9f9;
      padding: 10px;
      border-radius: 4px;
      min-width: 100px;
      flex: 1;
    }

    .summary-label {
      font-size: 12px;
      color: #5f6368;
      margin: 0;
    }

    .summary-value {
      font-size: 18px;
      font-weight: 500;
      color: #141414;
      margin: 0;
    }

    .date-selector {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .date-range-btn {
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid #e0e0e0;
      background-color: white;
      font-size: 13px;
      cursor: pointer;
    }

    .date-range-btn.active {
      background-color: #f2f2f2;
      border-color: #c2c2c2;
      font-weight: 500;
    }

    /* 添加图表固定高度 */
    .report-card canvas {
      height: 200px !important;
      max-height: 200px !important;
    }
  </style>
</head>

<body>
  <!-- Notification Element -->
  <div id="notification" class="notification success">
    <p id="notification-message" class="notification-message"></p>
  </div>

  <div class="container">
    <header>
      <div class="logo">
        <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M24 4H6V17.3333V30.6667H24V44H42V30.6667V17.3333H24V4Z"
            fill="currentColor"></path>
        </svg>
        <h2>Task Tracker</h2>
      </div>
      <div id="main-nav"></div>
    </header>

    <div class="content">
      <div class="content-container">
        <div class="title-section">
          <div class="title-content">
            <p class="main-title">Task Reports</p>
            <p class="subtitle">Analyze your productivity and task completion patterns.</p>
          </div>
        </div>

        <div class="date-selector">
          <button class="date-range-btn active" data-range="week">This Week</button>
          <button class="date-range-btn" data-range="month">This Month</button>
          <button class="date-range-btn" data-range="quarter">Last 3 Months</button>
          <button class="date-range-btn" data-range="year">This Year</button>
          <button class="date-range-btn" data-range="all">All Time</button>
        </div>

        <div class="report-summary">
          <div class="summary-item">
            <p class="summary-label">Total Tasks</p>
            <p id="summary-total-tasks" class="summary-value">0</p>
          </div>
          <div class="summary-item">
            <p class="summary-label">Completed</p>
            <p id="summary-completed-tasks" class="summary-value">0</p>
          </div>
          <div class="summary-item">
            <p class="summary-label">Completion Rate</p>
            <p id="summary-completion-rate" class="summary-value">0%</p>
          </div>
          <div class="summary-item">
            <p class="summary-label">Total Hours</p>
            <p id="summary-total-hours" class="summary-value">0h</p>
          </div>
          <div class="summary-item">
            <p class="summary-label">Average Daily</p>
            <p id="summary-avg-daily" class="summary-value">0h</p>
          </div>
        </div>

        <!-- 新增：工作日历热力图区块 -->
        <h2 class="section-title">Work Time Heatmap</h2>
        <div class="chart-container">
          <canvas id="reports-heatmap-canvas" style="width:100%;height:120px;display:block;"></canvas>
        </div>

        <h2 class="section-title">Performance Charts</h2>

        <div class="chart-container">
          <canvas id="completion-trend-chart"></canvas>
        </div>

        <div class="reports-grid">


          <div class="report-card">
            <div class="report-card-header">
              <h3 class="report-card-title">Time Distribution</h3>
            </div>
            <canvas id="time-distribution-chart" height="200"></canvas>
          </div>

          <div class="report-card">
            <div class="report-card-header">
              <h3 class="report-card-title">Daily Productivity</h3>
              <div class="tooltip">
                <div class="tooltip-icon">?</div>
                <span class="tooltip-text">Shows data for the last 7 days regardless of the selected time range</span>
              </div>
            </div>
            <canvas id="daily-productivity-chart" height="200"></canvas>
          </div>

          <div class="report-card">
            <div class="report-card-header">
              <h3 class="report-card-title">Status Distribution</h3>
            </div>
            <table class="report-table" id="status-table">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Count</th>
                  <th>Percentage</th>
                  <th>Distribution</th>
                </tr>
              </thead>
              <tbody>
                <!-- Status distribution will be populated here -->
              </tbody>
            </table>
          </div>

          <div class="report-card">
            <div class="report-card-header">
              <h3 class="report-card-title">Task Tags Analysis</h3>
            </div>
            <table class="report-table" id="tags-table">
              <thead>
                <tr>
                  <th>Tag</th>
                  <th>Count</th>
                  <th>Hours</th>
                  <th>Distribution</th>
                </tr>
              </thead>
              <tbody>
                <!-- Tags distribution will be populated here -->
              </tbody>
            </table>
          </div>

          
        </div>
      </div>
    </div>
  </div>

  <script src="reports.js"></script>
  <script src="timer-float.js"></script>
  <script src="js/chart.js"></script>
  <script src="js/chartjs-chart-matrix.js"></script>
  <script src="js/chartjs-adapter-date-fns.js"></script>
  <script src="nav.js"></script>
</body>

</html>